<template>
  <view class="accommodation-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <text>←</text>
      </view>
      <view class="header-title">预订住宿</view>
    </view>
    
    <!-- 轮播广告 -->
    <view class="banner-wrapper">
      <ad-banner></ad-banner>
    </view>
    
    <!-- 酒店信息 -->
    <view class="hotel-info">
      <view class="hotel-name">海景湾酒店</view>
      <view class="hotel-address">
        <text class="iconfont icon-location"></text>
        <text>三亚市海棠湾海景路88号</text>
      </view>
    </view>
    
    <!-- 日期选择 -->
    <view class="section-title">选择日期</view>
    <view class="date-picker">
      <view class="date-item">
        <text class="date-label">入住日期</text>
        <uni-datetime-picker 
          type="date" 
          :value="startDate" 
          @change="startDateChange"
          class="date-picker-component">
          <view class="date-display">
            <text>{{ startDate || '请选择日期' }}</text>
            <text class="date-icon iconfont icon-calendar"></text>
          </view>
        </uni-datetime-picker>
      </view>
      <view class="date-separator">至</view>
      <view class="date-item">
        <text class="date-label">离店日期</text>
        <uni-datetime-picker 
          type="date" 
          :value="endDate" 
          @change="endDateChange"
          :start="startDate"
          class="date-picker-component">
          <view class="date-display">
            <text>{{ endDate || '请选择日期' }}</text>
            <text class="date-icon iconfont icon-calendar"></text>
          </view>
        </uni-datetime-picker>
      </view>
    </view>
    
    <!-- 房间类型选择 -->
    <view class="section-title">房间类型</view>
    <view class="room-type-picker">
      <picker @change="roomTypeChange" :value="roomTypeIndex" :range="roomTypes">
        <view class="room-type-selector">
          <text>{{ roomTypes[roomTypeIndex] }}</text>
          <text class="iconfont icon-down"></text>
        </view>
      </picker>
    </view>
    
    <!-- 入住人信息 -->
    <view class="guest-info-section">
      <view class="guest-header">
        <text>入住人信息</text>
        <text class="add-guest" @click="addGuest">添加入住人</text>
      </view>
      
      <view class="guest-list" v-if="guests.length > 0">
        <view class="guest-item" v-for="(guest, index) in guests" :key="index">
          <view class="guest-info">
            <view class="guest-name">{{ guest.name }}</view>
            <view class="guest-phone">{{ guest.phone }}</view>
          </view>
          <view class="guest-actions">
            <text class="edit-btn" @click="editGuest(index)">编辑</text>
            <text class="delete-btn" @click="deleteGuest(index)">删除</text>
          </view>
        </view>
      </view>
      <view class="no-guest" v-else>
        <text>请添加入住人信息</text>
      </view>
    </view>
    
    <!-- 确认预订按钮 - 现在放在入住人信息模块下面 -->
    <view class="confirm-booking-section">
      <button class="confirm-booking-btn" @click="confirmBooking">确认预订</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import AdBanner from '@/components/AdBanner.vue';

// 返回按钮功能
const goBack = () => {
  uni.navigateTo({
    url: '/pages/index_home/index_home'
  });
};

// 日期选择
const startDate = ref('');
const endDate = ref('');

// 房间类型
const roomTypes = ['标准双床房', '豪华大床房', '家庭套房', '行政套房'];
const roomTypeIndex = ref(0);

// 入住人信息
const guests = ref([
  // 初始不加入任何示例数据，方便用户从零开始添加
]);
const currentGuest = reactive({
  name: '',
  phone: ''
});
const isEditingGuest = ref(false);
const editingIndex = ref(-1);

// 日期选择相关方法
const startDateChange = (e) => {
  startDate.value = e;
  // 如果离店日期早于入住日期，自动调整离店日期
  if (endDate.value && new Date(endDate.value) < new Date(e)) {
    // 设置离店日期为入住日期后一天
    const nextDay = new Date(e);
    nextDay.setDate(nextDay.getDate() + 1);
    endDate.value = formatDate(nextDay);
  }
};

const endDateChange = (e) => {
  endDate.value = e;
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 初始化日期 - 设置今天和明天为默认日期
onMounted(() => {
  const today = new Date();
  startDate.value = formatDate(today);
  
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  endDate.value = formatDate(tomorrow);
});

// 房间类型选择变更
const roomTypeChange = (e) => {
  roomTypeIndex.value = e.detail.value;
};

// 入住人信息相关方法
const addGuest = () => {
  isEditingGuest.value = false;
  currentGuest.name = '';
  currentGuest.phone = '';
  
  // 跳转到入住人表单页面
  uni.navigateTo({
    url: '/pages/accommodation/guest_form',
    success: (res) => {
      // 传递参数给表单页
      res.eventChannel.emit('guestData', {
        name: '',
        phone: '',
        isEdit: false,
        editIndex: -1
      });
      
      // 监听表单页返回的数据
      res.eventChannel.on('saveGuest', (data) => {
        console.log('接收到表单页返回的数据:', data);
        if (data) {
          if (data.isEdit && data.editIndex > -1) {
            // 编辑模式
            guests.value[data.editIndex] = {
              name: data.name,
              phone: data.phone
            };
            uni.showToast({
              title: '修改成功',
              icon: 'success'
            });
          } else {
            // 添加模式
            guests.value.push({
              name: data.name,
              phone: data.phone
            });
            uni.showToast({
              title: '添加成功',
              icon: 'success'
            });
            
            // 提示用户是否继续添加
            setTimeout(() => {
              uni.showModal({
                title: '添加成功',
                content: '是否继续添加入住人?',
                confirmText: '继续添加',
                cancelText: '完成',
                success: (res) => {
                  if (res.confirm) {
                    // 继续添加
                    addGuest();
                  }
                }
              });
            }, 500);
          }
        }
      });
    }
  });
};

const editGuest = (index) => {
  isEditingGuest.value = true;
  editingIndex.value = index;
  currentGuest.name = guests.value[index].name;
  currentGuest.phone = guests.value[index].phone;
  
  // 跳转到入住人表单页面
  uni.navigateTo({
    url: '/pages/accommodation/guest_form',
    success: (res) => {
      // 传递参数给表单页
      res.eventChannel.emit('guestData', {
        name: currentGuest.name,
        phone: currentGuest.phone,
        isEdit: true,
        editIndex: index
      });
      
      // 监听表单页返回的数据
      res.eventChannel.on('saveGuest', (data) => {
        console.log('接收到表单页返回的数据:', data);
        if (data) {
          if (data.isEdit && data.editIndex > -1) {
            // 编辑模式
            guests.value[data.editIndex] = {
              name: data.name,
              phone: data.phone
            };
            uni.showToast({
              title: '修改成功',
              icon: 'success'
            });
          } else {
            // 添加模式
            guests.value.push({
              name: data.name,
              phone: data.phone
            });
            uni.showToast({
              title: '添加成功',
              icon: 'success'
            });
          }
        }
      });
    }
  });
};

const deleteGuest = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除此入住人信息吗？',
    success: (res) => {
      if (res.confirm) {
        guests.value.splice(index, 1);
      }
    }
  });
};

// 确认预订
const confirmBooking = () => {
  if (guests.value.length === 0) {
    uni.showToast({
      title: '请添加至少一位入住人',
      icon: 'none'
    });
    return;
  }
  
  if (!startDate.value || !endDate.value) {
    uni.showToast({
      title: '请选择入住和离店日期',
      icon: 'none'
    });
    return;
  }
  
  // 显示加载中
  uni.showLoading({
    title: '预订中...'
  });
  
  // 模拟网络请求，1秒后跳转到预订成功页面
  setTimeout(() => {
    uni.hideLoading();
    
    // 获取主要联系电话（使用第一位入住人的电话）
    const mainPhone = guests.value[0].phone || '';
    
    // 准备预订数据
    const bookingData = {
      orderNo: 'CONF' + new Date().getTime().toString().substring(0, 10),
      roomType: roomTypes[roomTypeIndex.value],
      startDate: startDate.value,
      endDate: endDate.value,
      guests: guests.value,
      phoneNumber: mainPhone
    };
    
    // 跳转到预订成功页面并传递数据
    uni.navigateTo({
      url: '/pages/accommodation/success',
      success: (res) => {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('bookingData', bookingData);
      }
    });
  }, 1000);
};
</script>

<style lang="scss">
.accommodation-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  max-width: 750rpx;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 30rpx;
}

// 头部导航
.header {
  position: relative;
  height: 100rpx;
  background: linear-gradient(135deg, #1E90FF, #4682B4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  .back-icon {
    position: absolute;
    left: 30rpx;
    font-size: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s;
    
    &:active {
      background-color: rgba(255, 255, 255, 0.3);
      transform: scale(0.95);
    }
  }
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
  }
}

// 轮播广告
.banner-wrapper {
  padding: 0 30rpx;
  margin: 20rpx 0;
  
  .ad-banner {
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

// 酒店信息
.hotel-info {
  background-color: #ffffff;
  padding: 30rpx;
  margin: 0 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .hotel-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
    color: #333;
  }
  
  .hotel-address {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
    
    .icon-location {
      margin-right: 10rpx;
      color: #1E90FF;
      font-size: 32rpx;
    }
  }
}

.section-title {
  padding: 30rpx 30rpx 20rpx;
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    left: 30rpx;
    bottom: 10rpx;
    width: 60rpx;
    height: 4rpx;
    background: linear-gradient(to right, #1E90FF, #4682B4);
    border-radius: 2rpx;
  }
}

// 日期选择
.date-picker {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin: 0 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .date-item {
    flex: 1;
    position: relative;
    
    .date-label {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .date-picker-component {
      width: 100%;
      
      .date-display {
        padding: 20rpx;
        background-color: #f9f9f9;
        border-radius: 12rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
        
        &:active {
          background-color: #f0f0f0;
        }
      }
      
      .date-icon {
        color: #1E90FF;
        font-size: 32rpx;
      }
    }
  }
  
  .date-separator {
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

// 房间类型选择
.room-type-picker {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin: 0 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .room-type-selector {
    padding: 20rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    
    &:active {
      background-color: #f0f0f0;
    }
    
    .icon-down {
      color: #999999;
      font-size: 32rpx;
    }
  }
}

// 入住人信息
.guest-info-section {
  margin: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .guest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    text {
      font-size: 30rpx;
      font-weight: bold;
    }
    
    .add-guest {
      color: #1E90FF;
      font-size: 28rpx;
      padding: 8rpx 16rpx;
      background-color: rgba(30, 144, 255, 0.1);
      border-radius: 8rpx;
      transition: all 0.3s;
      
      &:active {
        background-color: rgba(30, 144, 255, 0.2);
      }
    }
  }
  
  .guest-list {
    .guest-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #f0f0f0;
      
      .guest-info {
        display: flex;
        flex-direction: column;
        
        .guest-name {
          font-size: 30rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 6rpx;
        }
        
        .guest-phone {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .guest-actions {
        display: flex;
        
        .edit-btn, .delete-btn {
          margin-left: 20rpx;
          font-size: 28rpx;
          padding: 8rpx 16rpx;
          border-radius: 8rpx;
          transition: all 0.3s;
        }
        
        .edit-btn {
          color: #1E90FF;
          background-color: rgba(30, 144, 255, 0.1);
          
          &:active {
            background-color: rgba(30, 144, 255, 0.2);
          }
        }
        
        .delete-btn {
          color: #FF4500;
          background-color: rgba(255, 69, 0, 0.1);
          
          &:active {
            background-color: rgba(255, 69, 0, 0.2);
          }
        }
      }
    }
  }
  
  .no-guest {
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: center;
    color: #999999;
    font-size: 28rpx;
  }
}

// 确认预订按钮区域
.confirm-booking-section {
  width: 100%;
  max-width: 375px !important;
  margin: 40rpx auto;
  padding: 0 30rpx;
  box-sizing: border-box;
}

// 确认预订按钮
.confirm-booking-btn {
  background: linear-gradient(135deg, #1E90FF, #4682B4);
  color: #ffffff;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  width: 100%;
  box-sizing: border-box;
  border-radius: 45rpx;
  margin: 0 auto;
  border: none;
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
  transition: all 0.3s;
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.2);
  }
}

/* 移动端预览样式 */
@media screen and (min-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
  
  uni-page-body {
    max-width: 375px !important;
    margin: 0 auto !important;
    position: relative !important;
    min-height: 100vh !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  /* 确认预订按钮自适应 */
  .confirm-booking-section {
    width: 100%;
    max-width: 375px !important;
    margin: 40rpx auto;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

/* 小屏幕移动设备适配 */
@media screen and (max-width: 340px) {
  .confirm-booking-btn {
    font-size: 28rpx;
    height: 80rpx;
  }
  
  .accommodation-container {
    padding-bottom: 20rpx;
  }
}

/* 中等屏幕移动设备适配 */
@media screen and (min-width: 341px) and (max-width: 400px) {
  .confirm-booking-btn {
    font-size: 30rpx;
  }
}
</style> 